<script setup lang="ts">
import { defineProps } from 'vue'
import { useRouter } from 'vue-router'
import AddAnimeDialog from '@/components/homepage/AddAnimeDialog.vue'

const prop = defineProps({
  poster: String,
  title: String,
  subtitle: String,
  id: String,
})

const router = useRouter()

function handleClick() {
  console.log('click')
  router.push({ path: '/animesummary/' + prop.id })
}
</script>

<template>
  <v-hover>
    <template v-slot:default="{ isHovering, props }">
      <v-card
        hover
        @click="handleClick"
        v-bind="props"
        :elevation="isHovering ? 5 : 0"
        width="200"
        height="320"
        style="margin: 20px; user-select: none"
      >
        <v-img
          rounded
          height="250"
          style="margin: 8px"
          :src="prop.poster"
        ></v-img>

        <v-card-title
          class="card-hover"
          style="font-size: 18px; margin: 0; padding: 0"
        >
          {{ prop.title }}
          <v-tooltip location="bottom" activator="parent">
            {{ prop.title }}
          </v-tooltip>
        </v-card-title>
        <v-card-subtitle style="font-size: 14px; padding: 0; margin: 0">
          {{ prop.subtitle }}
        </v-card-subtitle>

        <AddAnimeDialog></AddAnimeDialog>
      </v-card>
    </template>
  </v-hover>
</template>

<style scoped>
.application .v-card {
  background-color: blue;
  backdrop-filter: blur(6px);
}
</style>
